<template>
  <div
    class="we-relative-box"
    v-show="visible"
    ref="target"
    :style="{
      top: styleBox.top + 'px',
      left: styleBox.left + 'px',
    }"
    @click.stop
  >
    <slot />
  </div>
</template>

<script setup lang="tsx" name="RelativeBox">
import { defineProps, defineEmits, ref, watch} from "vue";
import { onClickOutside } from "@vueuse/core";

const props = defineProps({
  visible: { type: Boolean, default: false },
  style: {type: Object,default: () => {return { top: 0, left: 0 };}}
});

const styleBox = ref(props.style);
watch(
  () => props.style,
  (newVal) => {styleBox.value = newVal;},
  {immediate: true,deep: true}
);

const emit = defineEmits(["close"]);
const target = ref(null);
onClickOutside(target, (event) => {
  emit("close");
});

</script>

<style lang="less" scoped>
.we-relative-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  padding: 24px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
  box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
